﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link href="../../scripts/lib/layui/css/layui.css" rel="stylesheet" />
	<script src="../../scripts/lib/layui/layui.js"></script>
</head>
<body>
	<div class="layui-container">


		<form class="layui-form">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">输入框</label>
				<div class="layui-input-block">
					<input type="text" name="" lay-verType="tips" lay-verify="username" placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">下拉选择框</label>
				<div class="layui-input-block">
					<select name="interest" lay-filter="aihao">
						<option value="0">写作</option>
						<option value="1">阅读</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">复选框</label>
				<div class="layui-input-block">
					<input type="checkbox" name="like[write]" title="写作">
					<input type="checkbox" name="like[read]" title="阅读">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">开关关</label>
				<div class="layui-input-block">
					<input type="checkbox" name="customeCheckBoxName" lay-skin="switch" lay-filter="customeCheckBox">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">开关开</label>
				<div class="layui-input-block">
					<input type="checkbox" checked lay-skin="primary">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">单选框</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="0" title="男">
					<input type="radio" name="sex" value="1" title="女" checked>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">请填写描述</label>
				<div class="layui-input-block">
					<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
			<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>
	</div>
	<script>
		layui.use('form', function () {
			var form = layui.form;

			form.verify({
				username: function (value, item) { //value：表单的值、item：表单的DOM对象
					console.log(value);
					if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
						return '用户名不能有特殊字符';
					}
					if (/(^\_)|(\__)|(\_+$)/.test(value)) {
						return '用户名首尾不能出现下划线\'_\'';
					}
					if (/^\d+\d+\d$/.test(value)) {
						return '用户名不能全为数字';
					}
				}

				//我们既支持上述函数式的方式，也支持下述数组的形式
				//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
				, pass: [
					/^[\S]{6,12}$/
					, '密码必须6到12位，且不能出现空格'
				]
			});   

			//各种基于事件的操作，下面会有进一步介绍
			//form.render(); //更新全部

			//setTimeout(function () {
			//	form.render(null, 'aihao');
			//	console.log(3);
			//}, 2000)

			form.on('switch(customeCheckBox)', function (data) {
				console.log(data); 
				console.log(data.elem); //得到checkbox原始DOM对象
				console.log(data.elem.checked); //开关是否开启，true或者false
				console.log(data.value); //开关value值，也可以通过data.elem.value得到
				console.log(data.othis); //得到美化后的DOM对象
			});

			form.on('select', function (data) {
				console.log(data.elem); //得到select原始DOM对象
				console.log(data.value); //得到被选中的值
				console.log(data.othis); //得到美化后的DOM对象
			}); 

		});
	</script>
</body>
</html>
